import React, { useState } from "react"
import styles from './Tab.module.scss'
import Compared from './compared/Compared'
import Blast from '../blast/Blast'
// import AlignMent from '../../alignment/AlignMent'
import AlignMentConnectComponent from '../../alignment/Connect'
import msaAlignmentJson from "../../alignment/json/msaAlignment.json"
import { SnippetsOutlined, CloseCircleOutlined } from '@ant-design/icons'
import { Tabs } from 'antd'
const { TabPane } = Tabs


const tabArr = [
  {tab: 'NCBI Blast', key: 'tab2', tabKey: 'tab2', init: true, closable: false, component: 'Blast'},
  {tab: 'Alignment', key: 'tab1', tabKey: 'tab1', init: true, closable: false, component: 'Compared'},
]

// tab项对应的组件
function TabItem (props) {
  return (
    <div>
      {
        props.component === 'Compared' ?
        <Compared {...props} /> : (props.component === 'Blast' ?
        <Blast {...props} /> : 
        <AlignMentConnectComponent {...props} />)
      }
    </div>
  )
}

// 组件
export function TabCom (props) {
  const { withPreviewMode } = props.customProps
  const [tabs, setTabs] = React.useState(tabArr)
  const [activeKey, setActiveKey] = React.useState(tabArr[1].key)
  const tabChange = (key) => {
    setActiveKey(key)
  }

  const filterTabs = (removeActiveKey) => {
    const arr = []
    tabs.forEach(item => {
      if (removeActiveKey !== item.key) arr.push(item)
    })
    return arr
  }

  const tabPlanDelete = (removeActiveKey) => {
    const tabArr = filterTabs(removeActiveKey)
    setTabs(tabArr)
    tabChange(tabArr[1].key)
  }

  const setScrollTop = (flag) => {
    if (flag) {
      document.getElementById('clientBox').scrollTop = 0
    }
  }

  /**
   * 获取对比序列返回的数据
   * */ 
  const [seqAlignmentData, setSeqAlignmentData] = useState(msaAlignmentJson)
  window.AreactMethods.setSeqAlignmentData = setSeqAlignmentData

  /**
   * 创建Tab栏 展示比对结果
   * data: 序列比对结果数据
   * */ 
  window.AreactMethods.steCreateTabPlan = function(params) {
    if (!params.success) return window.toastr.warning(params.msg)
    let now = Date.now().toString()
    let key = 'tab' + now
    let tab = params.tabName + now.slice(now.length - 4, now.length)
    // 新增一个Tab展示结果
    setTabs([...tabs, {
      tab: tab,
      key: key,
      tabKey: key,
      closable: true, // Tab组件 type="editable-card"可以关闭 
      component: 'Align',
      init: false, // 不是初始项
      success: params.success
    }])
    setSeqAlignmentData(params.data) // 对比数据传入props
    setActiveKey(key) // Tab选中
    setScrollTop(true) // 滚动条置顶
  }

  React.useEffect(() => {}, [])

  return (
    <div id="clientBox" className={props.darkMode ? styles.customBoxDark : styles.customBox}>
      <div className={styles.tabsBox}>
        <Tabs 
          activeKey={activeKey} 
          defaultActiveKey={tabArr[0].key} 
          onChange={tabChange} 
          centered={true}
          style={{color: props.darkMode ? '#afb6bc' : '#444'}}
          >
          {
            tabs.map((e, idx) => <TabPane tab={
                    <span>
                      {
                        e.init ? null :
                        <SnippetsOutlined style={{fontSize:14,color: '#106ba3',position: 'relative',right: '-4px'}} />
                      }
                      {e.tab}
                      {
                        !e.closable ? null :
                        <CloseCircleOutlined 
                          onClick={(event) => {
                            event.stopPropagation()
                            tabPlanDelete(e.tabKey)
                          }} 
                          style={{fontSize:15,color: '#f44336',position: 'relative',right: '-10px', top: '1px'}} 
                        />
                      }
                    </span>
                  } 
                  key={e.key}
                  closable={e.closable}>
                    <TabItem 
                      seqAlignmentData={e.init ? null : seqAlignmentData}
                      activeKey={activeKey}
                      {
                        ...{
                          ...e,
                          withPreviewMode,
                          tabs,
                          setTabs,
                          setScrollTop,
                          setActiveKey,
                          idx,
                          darkMode: props.darkMode,
                          sequenceData: props.sequenceData,
                          defaultActiveKey: tabArr[0].key,
                          tabPlanDelete: tabPlanDelete
                        }
                      } 
                    />
            </TabPane>)
          }
        </Tabs>
      </div>
    </div>
  )
}